<!-- 添加收货地址 -->
<template>
	<view class="addShippingAddress page">
		<status-bar :title='title'></status-bar>
		<view class="addFrom">
			<view class="addFromList">
				<text>收货人</text><input type="text" v-model="username" placeholder="请填写收货人姓名" />
			</view>
			<view class="addFromList">
				<text>手机号码</text><input type="number" v-model="userphone" placeholder="请填写收货人手机号" />
			</view>
			<view class="addFromList" style="position: relative;">
				<text>所在地区</text>
				<button type="default" style="background: none;" @click="shixian2 = true" class='three'>{{pickered}}</button>
				<mpvue-city-picker @onCancel='shixian2 = false' :shixian2='shixian2' ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
				 @onConfirm="onConfirm"></mpvue-city-picker>
				 <text class="iconfont icon-xiasanjiaoxing reArrow"></text>
			</view>
			<view class="addFromList">
				<text>详细地址</text><input type="text" v-model="region1" placeholder="街道、楼牌号等" />
			</view>
			<view class='delTxt' v-if='editId' @click="showModal=true">删除收货地址</view>
		</view>
		<view class="submitBtn thmeBg" :style="{'--color': color}" @click='saveAddress'>{{page_type == 3?'保存':'保存并使用'}}</view>
		<showModel v-if='showModal' @cancelFunc='showModal= false' type='99'
		@certain='delAddress'
		title='确定要删除该地址吗？' 
		msg=' '
		btn1='取消' 
		btn2='删除'></showModel>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	var that,fastClick=true;
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				showModal: false,
				color: getApp().globalData.color,
				username: '',
				userphone: '',
				address: '',
				pickered: '请选择区县',
				region1: '',
				wrongTxt: '', // 容错提示
				page_type: 0,
				editId: '', // 编辑id
				index: 0,
				cityPickerValueDefault: [0, 0, 1],
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray: [],
				shixian2:false,
				param:'',
				title:'',
				staticUrl: this.staticUrl
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		onLoad(options) {
			let that = this;
			that.page_type = options.page_type;
			that.editId = options.editId;
			if(options.goods_id)
				that.param += '&goods_id=' + options.goods_id
			if(options.goods_num)
				that.param += '&goods_num=' + options.goods_num
			if(options.car_id)
				that.param += '&car_id=' + options.car_id
			if(options.group_id)
				that.param += '&group_id=' + options.group_id
			if(options.open_group)
				that.param += '&open_group=' + options.open_group
			if(options.specs)
				that.param = that.param + '&specs_bind_id=' + options.specs_bind_id + '&specs_bind_text=' + options.specs_bind_text
			if (options.editId) { // 编辑状态
				uni.setNavigationBarTitle({
					title: '编辑收货地址'
				})
				that.title = '编辑收货地址'
				that.$http.post({
					url: '/zzj_singleSaleApi/obtainAddress',
					data: {
						id: that.editId
					}
				}).then(res => {
					var data = res.data;
					if (data) {
						that.username = data.Aname;
						that.userphone = data.Amobile;
						that.address = data.Aregion;
						that.pickered = data.Aregion;
						that.region1 = data.Aaddress;
					}
				}) 
			} else {
				uni.setNavigationBarTitle({
					title: '添加收货地址'
				})
				that.title = '添加收货地址'
			}
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		methods: {
			delAddress(){
				let that = this;
				that.$http.post({
					url: '/zzj_singleSaleApi/delAdress',
					data: {
						v_id: uni.getStorageSync('vid'),
						bid: uni.getStorageSync('bid'),
						id: that.editId // 编辑地址id
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
					if(res.code == 100){
						if (that.page_type == 2){
							uni.redirectTo({
								url: '/orderPage/order/createOrder?adId=' + res.id + that.param
							})
						} else if (that.page_type == 3){
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},800)
						}
					}
				}) 
			},
			onConfirm(e) {
				let that = this;
				that.shixian2 = false;
				var add = e.label.replace(/-/g, '');
				that.pickered = add;
				that.address = add;
			},
			onBackPress() {
				let that = this;
				if (that.$refs.mpvuePicker.showPicker) {
					that.$refs.mpvuePicker.pickerCancel();
					return true;
				}
				if (that.$refs.mpvueCityPicker.showPicker) {
					that.$refs.mpvueCityPicker.pickerCancel();
					return true;
				}
			},
			// bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value);
				// this.index = e.target.value;
				// this.address = e.target.value[0] + e.target.value[1] + e.target.value[2];
				// this.pickered = e.target.value[0] + e.target.value[1] + e.target.value[2];
			// },
			saveAddress() {
				let that = this;
				uni.getStorage({
					key: 'vid',
					success: function(res) {
						if (that.username == '') {
							uni.showToast({icon:'none',title:'收货人姓名不能为空！'})
							return
						}
						if (that.userphone == '') {
							uni.showToast({icon:'none',title:'手机号码不能为空！'})
							return
						}
						if (!that.$reg.phone.test(that.userphone) && that.userphone != "") {
							uni.showToast({icon:'none',title:'手机号格式有误!'})
							return
						}
						if (that.address == '') {
							uni.showToast({icon:'none',title:'所在地区不能为空！'})
							return
						}
						if (that.region1 == '') {
							uni.showToast({icon:'none',title:'详细地址不能为空！'})
							return
						}
						if(!fastClick){
							return
						}
						fastClick = false
						if (that.editId) {
							// 11.编辑收货地址
							that.$http.post({
								url: '/zzj_singleSaleApi/addAdress',
								data: {
									v_id: res.data,
									Aname: that.username, //收货人姓名
									Amobile: that.userphone, //手机号码
									Aregion: that.address, //收货地址
									Aaddress: that.region1, //收货地区
									id: that.editId // 编辑地址id
								}
							}).then(res1 => {
								uni.showToast({
									title: res1.msg,
									icon: 'none',
									duration: 1500
								})
								if (that.page_type == 2){ // 合并版
									uni.redirectTo({
										url: '/orderPage/order/createOrder?adId=' + res1.id + that.param
									})
								} else if (that.page_type == 3){
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},800)
								}
								setTimeout(()=>{
									fastClick = true
								},800)
							}) 
						} else {
							// 11.添加收货地址
							that.$http.post({
								url: '/zzj_singleSaleApi/addAdress',
								data: {
									v_id: res.data,
									Aname: that.username, //收货人姓名
									Amobile: that.userphone, //手机号码
									Aregion: that.address, //收货地址
									Aaddress: that.region1, //收货地区
								}
							}).then(res1 => {
								uni.showToast({
									title: res1.msg,
									icon: 'none',
									duration: 1500
								})
								if (that.page_type == 2){ // 合并版
									uni.redirectTo({
										url: '/orderPage/order/createOrder?adId=' + res1.id + that.param
									})
								} else if (that.page_type == 3){
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},800)
								}
								setTimeout(()=>{
									fastClick = true
								},800)
							}) 
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	input{font-size: 24upx;}
	.three {
		display: inline-block;
		position: absolute;
		width: 100%;
		top: 0;
		color: #646464;
		text-align: left;
		font-size: 24upx;
		line-height: 110upx;
		left: 140upx;
		height: 100%;
	}

	.addShippingAddress {
		width: 100%;
		background: white;
		height: calc(100vh - var(--window-top));
		overflow: hidden;
	}

	.addFrom {
		width: 100%;
		padding-left: 30rpx;
	}

	.addFromList {
		width: 100%;
		border-bottom: 1upx solid #CCCCCC;
		padding: 30upx 0;
		overflow: hidden;
		line-height: 48upx;
		.reArrow{
			right: $uni-page-space;
			font-size: 30rpx;
			color: #AFAFAF;
			top: 50%;
			transform: translateY(-50%);
			position: absolute;
		}
	}

	.submitBtn {
		width: 80%;
		position: absolute;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		left: 10%;
		bottom: 30upx;
		color: #FFFFFF;
		border-radius: 64upx;
		font-size: 28rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.addFromList input {
		float: right;
		width: 80%;
		height: 48upx;
		color: #646464;
	}
	.delTxt{
		color: red;
		padding: 30rpx 0;
	}
</style>
